import { useSelector, useDispatch } from "react-redux"
import { useEffect } from "react"
import { getArticle } from "../store/actions/article"

const ArticleList = () => {
  const activeId = useSelector((state) => state.channel.activeId)
  const list = useSelector((state) => state.article)
  const dispatch = useDispatch()
  useEffect(() => {
    // 请求数据
    if (activeId !== null) {
      dispatch(getArticle(activeId))
    }
  }, [activeId, dispatch])
  const getImage = (cover) => {
    if (cover.type === 3) {
      return (
        <div className="img_box">
          <img src={cover.images[0]} className="w33" alt="" />
          <img src={cover.images[1]} className="w33" alt="" />{" "}
          <img src={cover.images[2]} className="w33" alt="" />
        </div>
      )
    } else if (cover.type === 1) {
      return (
        <div className="img_box">
          <img src={cover.images[0]} className="w100" alt="" />
        </div>
      )
    }
    return null
  }
  return (
    <div className="list">
      {list.map((item) => (
        <div className="article_item" key={item.art_id}>
          <h3>{item.title}</h3>
          {getImage(item.cover)}
          <div className="info_box">
            <span>{item.aut_name}</span>
            <span>{item.comm_count}评论</span>
            <span>{item.pubdate}</span>
          </div>
        </div>
      ))}
    </div>
  )
}
export default ArticleList
